<template>
  <div>
    componentV2<br>
    <!--    <aaa></aaa>-->
    <!--    <bbb></bbb>-->
    <!--    <ccc></ccc><br>-->
    ----------------------------<br>
    <!--    <component v-bind:is="aaa"></component>-->
    <div style="display: flex; position: fixed; top: 40px;width: 100%">
      <button @click="changeType('aaa')">aaa</button>
      <button @click="changeType('bbb')">bbb</button>
      <button @click="changeType('ccc')">ccc</button>
    </div>
    <!--    <keep-alive>没有生效-->
    <keep-alive>
      <component v-bind:is="type"></component>
    </keep-alive>
    <br>

    <!--    <aaa v-if="type==='aaa'"></aaa>-->
    <!--    <bbb v-if="type==='bbb'"></bbb>-->
    <!--    <ccc v-if="type==='ccc'"></ccc>-->

    <!--    <aaa v-show="type==='aaa'"></aaa>-->
    <!--    <bbb v-show="type==='bbb'"></bbb>-->
    <!--    <ccc v-show="type==='ccc'"></ccc>-->
    <br>
  </div>
</template>

<script>
  import aaa from './aaa'
  import bbb from './bbb'
  // import ccc from './ccc'
  import Loading from '../Loading'

  const AsyncComponent = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import( './ccc'),
    // 异步组件加载时使用的组件
    loading: Loading,
    // 加载失败时使用的组件
    error: Loading,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 5000,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
  })

  export default {
    name: "componentV2",
    components: {
      aaa,
      bbb,
      ccc: AsyncComponent
    },
    data() {
      return {
        aaa: 'aaa',
        bbb: 'bbb',
        ccc: 'ccc',
        type: 'aaa'
      }
    },
    methods: {
      changeType(type) {
        this.type = type
      }
    },
    destroyed() {
      console.log('main destroyed')
    }
  }
</script>

<style scoped>
  button {
    flex: 1;
    height: 50px;
    background-color: red;
  }

  button:hover {
    background-color: white;
  }
</style>
